<!doctype html><html class="" data-reactroot=""><head>
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-react-helmet="true" property="og:title" content="React-router5 中文文档"/><meta data-react-helmet="true" property="og:description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
<title data-react-helmet="true">React-router5 中文文档</title>
<link data-react-helmet="true" rel="stylesheet" href="/react_router_chinese/assets/index.css"/><link data-react-helmet="true" id="prismTheme" rel="stylesheet" href="/react_router_chinese/assets/prism.css"/>
<script data-react-helmet="true" >
    const shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (shouldSetIsDark) {
      document.documentElement.classList.add('is_dark');
      document.getElementById('prismTheme').href = "/react_router_chinese/assets/prism_tomorrow.css";
    }
  </script>
</head><body><header><h1 class="hide_on_mobile"><a href="/react_router_chinese/">React-router5 中文文档</a></h1><nav><ul><li class="show_on_mobile flex_center"><a class="czs-menu-l" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-menu-l.svg&quot;)"></a></li><li class="show_on_mobile"><h1 class="mobile_title"><a href="/react_router_chinese/">React-router5 中文文档</a></h1></li><li style="flex-grow:1"></li><li class="flex_center"><a class="czs-github-logo" href="https://github.com/frisktale/react_router_chinese" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-github-logo.svg&quot;)"></a></li><li class="toggle_dark flex_center"><span class="czs-sun" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun.svg&quot;)"></span><span class="czs-sun-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun-l.svg&quot;)"></span><span class="czs-moon" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon.svg&quot;)"></span><span class="czs-moon-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon-l.svg&quot;)"></span></li></ul></nav></header><aside class="sidebar"><ol class="list_style_none"><li class="unfold"><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">文档<span class="czs-angle-up-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></span><span class="czs-angle-down-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-down-l.svg&quot;)"></span></a><ol class="list_style_none" style="height:auto"><li class=""><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">快速开始</a></li><li class=""><a href="/react_router_chinese/guides/BasicComponents.html" class="nav_link">基础组件</a></li><li class=""><a href="/react_router_chinese/guides/ServerRendering.html" class="nav_link">服务端渲染</a></li><li class=""><a href="/react_router_chinese/guides/CodeSplitting.html" class="nav_link">代码拆分</a></li><li class=""><a href="/react_router_chinese/guides/ScrollRestoration.html" class="nav_link active">滚动恢复</a></li><li class=""><a href="/react_router_chinese/guides/Philosophy.html" class="nav_link">设计思想</a></li><li class=""><a href="/react_router_chinese/guides/Testting.html" class="nav_link">测试</a></li><li class=""><a href="/react_router_chinese/guides/ReduxIntegration.html" class="nav_link">集成 Redux</a></li><li class=""><a href="/react_router_chinese/guides/StaticRouter.html" class="nav_link">静态路由</a></li></ol></li><li class=""><a href="/react_router_chinese/API/API.html" class="nav_link">API</a></li></ol></aside><section class="main"><div class="main_article"><article><h2 id="%E6%BB%9A%E5%8A%A8%E6%81%A2%E5%A4%8D">滚动恢复<a class="anchor" href="#%E6%BB%9A%E5%8A%A8%E6%81%A2%E5%A4%8D">§</a></h2>
<p>在早期的React Router版本中，我们为滚动恢复提供了开箱即用的支持，从那时起开发者就一直在使用。希望本文档可以帮助你获取你需要的滚动条和路由的内容。</p>
<p>浏览器已经开始使用history.pushState自己处理滚动恢复，这就像她们以前使用普通浏览器导航一样处理滚动恢复。现在这个很酷的特性已经在Chrome中被支持了。</p>
<p>因为浏览器开始处理“默认情况”，并且不同的应用程序具有不同的滚动需求（就像本站这样），所以我们不提供默认的滚动管理。但是本指南应该可以帮助你实现任何滚动需求。</p>
<h3 id="%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B6%E9%83%A8">滚动到顶部<a class="anchor" href="#%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B6%E9%83%A8">§</a></h3>
<p>大多数情况下，你需要的是“滚动到顶部”这个功能，因为大部分情况是有一个包含了大量内容的长页面。使用<ScrollToTop>组件可以直接处理这中情况，该组件将会实现在每个导航上滚动窗口到顶部，你需要确保使用withRouter封装该组件以使其能够访问路由器的props。</p>
<pre class="language-autoit"><code class="language-autoit">class ScrollToTop extends Component {
  <span class="token function">componentDidUpdate</span><span class="token punctuation">(</span>prevProps<span class="token punctuation">)</span> {
    <span class="token keyword">if</span> <span class="token punctuation">(</span>this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>pathname !<span class="token operator">==</span> prevProps<span class="token punctuation">.</span>location<span class="token punctuation">.</span>pathname<span class="token punctuation">)</span> {
      window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token comment">;</span>
    }
  }

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    return this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token comment">;</span>
  }
}

export <span class="token keyword">default</span> <span class="token function">withRouter</span><span class="token punctuation">(</span>ScrollToTop<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<p>然后将其渲染在应用的顶部</p>
<pre class="language-autoit"><code class="language-autoit">function <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Router<span class="token operator">></span>
      <span class="token operator">&lt;</span>ScrollToTop<span class="token operator">></span>
        <span class="token operator">&lt;</span>App <span class="token operator">/</span><span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>ScrollToTop<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>Router<span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token comment">;</span>
}

<span class="token operator">/</span><span class="token operator">/</span> <span class="token operator">or</span> just render it bare anywhere you want<span class="token punctuation">,</span> but just one <span class="token punctuation">:</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span>ScrollToTop <span class="token operator">/</span><span class="token operator">></span><span class="token comment">;</span>
</code></pre>
<p>如果你有一个连接到路由的tab选项卡，那么你可能不希望在切换标签时滚动到顶部。此时可以使用<ScrollToTopOnMount>。</p>
<pre class="language-autoit"><code class="language-autoit">class ScrollToTopOnMount extends Component {
  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    window<span class="token punctuation">.</span><span class="token function">scrollTo</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token comment">;</span>
  }

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    return <span class="token keyword">null</span><span class="token comment">;</span>
  }
}

class LongContent extends Component {
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    <span class="token operator">&lt;</span>div<span class="token operator">></span>
      <span class="token operator">&lt;</span>ScrollToTopOnMount <span class="token operator">/</span><span class="token operator">></span>
      <span class="token operator">&lt;</span>h1<span class="token operator">></span>Here is my long content page<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token comment">;</span>
  }
}

<span class="token operator">/</span><span class="token operator">/</span> somewhere <span class="token keyword">else</span>
<span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/long-content"</span> component<span class="token operator">=</span>{LongContent} <span class="token operator">/</span><span class="token operator">></span><span class="token comment">;</span>
</code></pre>
<h3 id="%E9%80%9A%E7%94%A8%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88">通用解决方案<a class="anchor" href="#%E9%80%9A%E7%94%A8%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88">§</a></h3>
<p>对于通用解决方案（以及浏览器开始本地实现）我们谈论两件事：</p>
<ol>
<li>导航跳转时自动滚动到页面顶部，这样不会出现创建一个新的页面滚动条在底部。</li>
<li>在前进或后退时保留原来滚动条的位置（不包含点击跳转链接）</li>
</ol>
<p>对于第一点我们想要发布一个通用的api，这是我们想要的：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Router<span class="token operator">></span>
  <span class="token operator">&lt;</span>ScrollRestoration<span class="token operator">></span>
    <span class="token operator">&lt;</span>div<span class="token operator">></span>
      <span class="token operator">&lt;</span>h1<span class="token operator">></span>App<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>

      <span class="token operator">&lt;</span>RestoredScroll id<span class="token operator">=</span><span class="token string">"bunny"</span><span class="token operator">></span>
        <span class="token operator">&lt;</span>div style<span class="token operator">=</span>{{ height<span class="token punctuation">:</span> <span class="token string">"200px"</span><span class="token punctuation">,</span> overflow<span class="token punctuation">:</span> <span class="token string">"auto"</span> }}<span class="token operator">></span>I will overflow<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>RestoredScroll<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>ScrollRestoration<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Router<span class="token operator">></span>
</code></pre>
<p>首先，ScrollRestoration将在导航时向上滚动窗口。 其次，它将使用location.key将窗口滚动位置和RestoredScroll组件的滚动位置保存到sessionStorage。 然后，当ScrollRestoration或RestoredScroll组件挂载时，他们可以从sessionsStorage中查找它们的位置。</p>
<p>对我来说棘手的是当我不希望管理窗口滚动时,如何实现一个“选择退出”API，。 例如，当你有一些浮动在页面上的选项卡导航时，你可能不希望滚动到顶部（选项卡可能会滚动到视图之外）。</p>
<p>当我了解到chrome现在已经在为我们管理滚动位置，并且意识到不同的应用将有不同的滚动需求时，我有点失去了做这件事的信念 - 特别是当人们只想滚动到顶部时（ 你看到的是很容易直接添加到你的应用的内容）。</p>
<p>基于此，我们觉得我们已经没有足够的力量来完成这项工作（就像你的时间是有限的一样）。但是，我们很乐意帮助任何愿意使用通用解决方案的人。如果你一开始就使用她，你的项目会有一个可靠的解决方案。</p></article></div><aside class="main_toc_container nav_link_container"><div class="main_toc"><nav class="toc"><ol><li><a href="#%E6%BB%9A%E5%8A%A8%E6%81%A2%E5%A4%8D">滚动恢复</a><ol><li><a href="#%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B6%E9%83%A8">滚动到顶部</a></li><li><a href="#%E9%80%9A%E7%94%A8%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88">通用解决方案</a></li></ol></li></ol></nav></div></aside></section><footer>Powered by&amp;nbsp;<a href="https://github.com/xcatliu/pagic" target="_blank">Pagic</a></footer><div class="tools flex_center hide_on_mobile"><a class="czs-pen button" href="https://github.com/frisktale/react_router_chinese/edit/master/./guides/ScrollRestoration.md" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-pen.svg&quot;)"></a><a class="czs-angle-up-l button" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></a></div><script src="https://cdn.pagic.org/react@17.0.2/umd/react.production.min.js"></script><script src="https://cdn.pagic.org/react-dom@17.0.2/umd/react-dom.production.min.js"></script><script type="module" src="/react_router_chinese/index.js"></script></body></html>